<template>
  <div class="right-navigation">
    <ul>
      <li
        v-for="(item, index) in navItems"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="scrollToSection(item.id)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "RightNavigation",
  props: {
    navItems: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      activeIndex: 0,
      observer: null,
      sectionElements: [],
    };
  },
  mounted() {
    this.initIntersectionObserver();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    initIntersectionObserver() {
      this.sectionElements = this.navItems
        .map((item) => document.getElementById(item.id))
        .filter((el) => el);

      const options = {
        root: null,
        rootMargin: "0px",
        threshold: 0.5,
      };

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = this.navItems.findIndex(
              (item) => item.id === entry.target.id
            );
            if (index !== -1) {
              this.activeIndex = index;
            }
          }
        });
      }, options);

      this.sectionElements.forEach((el) => {
        if (el) this.observer.observe(el);
      });
    },
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
        });
      }
    },
  },
};
</script>

<style scoped>
.right-navigation {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 1000;
}

.right-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.right-navigation li {
  padding: 10px 15px;
  cursor: pointer;
  color: #333;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.right-navigation li:hover {
  color: #0099a8;
  background-color: #f5f5f5;
}

.right-navigation li.active {
  color: #fff;
  background-color: #0099a8;
}
</style>